Web Development JSON Data Manipulation এবং Chart.js গাইড ও নোট

Chart.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা সহজেই ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়তা করে। অনেক সময় আমাদের ডেটা বিভিন্ন সোর্স থেকে আসে, যেমন JSON ফাইল বা API। এই ডেটা সাধারণত সঠিক ফরম্যাটে Chart.js এ প্রদর্শন করতে হয়। JSON (JavaScript Object Notation) ডেটা প্রক্রিয়াকরণ এবং Chart.js এ উপস্থাপনা নিয়ে কাজ করার জন্য কিছু কৌশল জানা প্রয়োজন।

এখানে আমরা দেখব কিভাবে JSON ডেটা ম্যানিপুলেশন এবং Chart.js এর মাধ্যমে তা ভিজ্যুয়ালাইজ করা যায়।

JSON ডেটার সঙ্গে Chart.js এর ইন্টিগ্রেশন

JSON ফাইল বা API থেকে ডেটা গ্রহণ করে সেটি Chart.js এর ডেটা ফরম্যাটে কনভার্ট করা হয়। এখানে JSON ডেটা ম্যানিপুলেশন করে সেটি চার্টে রেন্ডার করা হবে।

JSON Data Structure Example

ধরি, আমাদের কাছে একটি JSON ডেটা আছে যা একটি বিক্রয়ের ডেটা প্রদর্শন করছে, যেখানে প্রতি মাসের বিক্রয় মান এবং তারিখ দেওয়া রয়েছে:

[
    {"month": "January", "sales": 10},
    {"month": "February", "sales": 15},
    {"month": "March", "sales": 20},
    {"month": "April", "sales": 25},
    {"month": "May", "sales": 30}
]

এটি একটি সাধারণ JSON ডেটা, যেখানে প্রতিটি মাসের জন্য বিক্রয়ের মান দেওয়া রয়েছে।

JSON ডেটা প্রক্রিয়াকরণ এবং Chart.js এ ব্যবহার

Chart.js এ JSON ডেটা উপস্থাপনের জন্য, প্রথমে JSON ডেটা থেকে ডেটা সংগ্রহ করতে হবে এবং তারপর সেটি Chart.js এর জন্য উপযুক্ত ফরম্যাটে রূপান্তর করতে হবে।

১. JSON ডেটা Chart.js এ লোড এবং প্রক্রিয়া করা

এখানে JSON ডেটা কে এক্সট্রাক্ট এবং Chart.js ডেটা ফরম্যাটে রূপান্তর করা হবে। আমরা JSON ডেটার month এবং sales ভ্যালু ব্যবহার করে একটি Bar Chart তৈরি করব।

JavaScript Example (JSON Data Manipulation):

// JSON ডেটা
const jsonData = [
    {"month": "January", "sales": 10},
    {"month": "February", "sales": 15},
    {"month": "March", "sales": 20},
    {"month": "April", "sales": 25},
    {"month": "May", "sales": 30}
];

// এক্স এবং ওয়াই ডেটা আলাদা করা
const months = jsonData.map(item => item.month);
const sales = jsonData.map(item => item.sales);

// Chart.js দিয়ে চার্ট তৈরি করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // চার্ট টাইপ
    data: {
        labels: months, // এক্স-অক্ষের লেবেল (মাস)
        datasets: [{
            label: 'Monthly Sales', // ডেটাসেটের নাম
            data: sales, // ওয়াই-অক্ষের ডেটা (বিক্রয়)
            backgroundColor: 'rgba(75, 192, 192, 0.6)', // বার রঙ
            borderColor: 'rgba(75, 192, 192, 1)', // বর্ডার রঙ
            borderWidth: 1 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        responsive: true, // রেসপন্সিভ
        scales: {
            y: {
                beginAtZero: true // Y অক্ষ শূন্য থেকে শুরু
            }
        }
    }
});

ব্যাখ্যা:

1. JSON ডেটা: JSON ডেটা প্রথমে jsonData ভ্যারিয়েবলে রাখা হয়েছে।
2. map() ফাংশন ব্যবহার করে:
   • months অ্যারে তৈরি করা হয়েছে যেটিতে মাসের নাম রয়েছে।
   • sales অ্যারে তৈরি করা হয়েছে যেটিতে বিক্রয়ের পরিমাণ রয়েছে।
3. Chart.js দিয়ে ডেটাকে labels (এক্স-অক্ষ) এবং datasets (ওয়াই-অক্ষ) হিসেবে মাপ করা হয়েছে।

JSON থেকে ডেটা নিয়ে API ব্যবহার করে Chart.js এ রেন্ডার করা

ধরা যাক, JSON ডেটা একটি API থেকে আসছে এবং সেটি থেকে ডেটা রিট্রিভ করে Chart.js এ প্রদর্শন করতে হবে। আপনি fetch() API ব্যবহার করে JSON ডেটা নিতে পারেন।

উদাহরণ: API থেকে JSON ডেটা নিয়ে Chart.js এ প্রদর্শন

// API থেকে JSON ডেটা ফেচ করা
fetch('https://api.example.com/sales')
    .then(response => response.json())
    .then(data => {
        // JSON ডেটা থেকে এক্স এবং ওয়াই ডেটা প্রস্তুত করা
        const months = data.map(item => item.month);
        const sales = data.map(item => item.sales);

        // Chart.js দিয়ে চার্ট তৈরি করা
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line', // লাইন চার্ট
            data: {
                labels: months,
                datasets: [{
                    label: 'Monthly Sales',
                    data: sales,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching data:', error));

ব্যাখ্যা:

• fetch() API ব্যবহার করে একটি https://api.example.com/sales API থেকে ডেটা ফেচ করা হয়েছে।
• response.json() ব্যবহার করে JSON ডেটা রিট্রিভ করা হয়েছে।
• তারপর ডেটাকে months এবং sales অ্যারেতে আলাদা করা হয়েছে।
• Chart.js দিয়ে এটি রেন্ডার করা হয়েছে।

JSON ডেটা ম্যানিপুলেশন এবং চার্ট কাস্টমাইজেশন

1. ডেটা ফিল্টার করা: আপনি JSON ডেটা থেকে নির্দিষ্ট মান (যেমন, মাসের জন্য বিক্রয়ের পরিমাণ বেশি বা কম) ফিল্টার করতে পারেন এবং সেগুলি চার্টে প্রদর্শন করতে পারেন।

   উদাহরণ:

   const filteredData = jsonData.filter(item => item.sales > 20);
   

2. ডেটা সোর্ট করা: JSON ডেটা সোর্ট করে চার্টে রেন্ডার করা যেতে পারে। যেমন, আপনি মাসের বিক্রয় থেকে সর্বাধিক বিক্রয় পাওয়া মাসকে প্রথমে দেখাতে পারেন।

   উদাহরণ:

   const sortedData = jsonData.sort((a, b) => b.sales - a.sales);
   

3. Dynamic Chart Update: JSON ডেটা পরিবর্তিত হলে, আপনি myChart.update() ব্যবহার করে চার্ট ডাইনামিকালি আপডেট করতে পারেন।

সারাংশ

Chart.js এর মাধ্যমে JSON ডেটা ম্যানিপুলেশন খুবই সহজ এবং শক্তিশালী। আপনি JSON ডেটা বিভিন্ন সোর্স থেকে (ফাইল বা API) গ্রহণ করতে পারেন এবং তা Chart.js এর জন্য উপযুক্ত ফরম্যাটে কনভার্ট করে চার্টে উপস্থাপন করতে পারেন। JSON ডেটা ম্যানিপুলেশন এর মাধ্যমে ডেটাকে ফিল্টার, সোর্ট, অথবা আপডেট করতে পারেন, এবং সেটি আপনার চার্টের উপস্থাপনায় উন্নতি আনতে সাহায্য করে।